{% extends "base.html" %}

{% block title %}编辑预约 - 管理员{% endblock %}

{% block extra_css %}
<style>
    .edit-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .current-info {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
    }

    .duration-display {
        background: #e3f2fd;
        border: 1px solid #bbdefb;
        border-radius: 4px;
        padding: 0.75rem;
        margin-top: 1rem;
        text-align: center;
        font-weight: 500;
        color: #1976d2;
    }

    .form-section {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .btn-save {
        background: #28a745;
        border: none;
        padding: 0.6rem 1.5rem;
    }

    .btn-save:hover {
        background: #218838;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="edit-container">
        <!-- 面包屑导航 -->
        <div class="row mb-3">
            <div class="col-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">管理首页</a></li>
                        <li class="breadcrumb-item"><a href="{{ url_for('admin_reservations.list_reservations') }}">预约管理</a></li>
                        <li class="breadcrumb-item"><a href="{{ url_for('admin_reservations.detail', reservation_id=reservation.id) }}">预约详情</a></li>
                        <li class="breadcrumb-item active">编辑预约</li>
                    </ol>
                </nav>
            </div>
        </div>

        <!-- 页面标题 -->
        <div class="row mb-3">
            <div class="col-12">
                <h3>编辑预约 #{{ reservation.id }}</h3>
                <p class="text-muted mb-0">学员：{{ reservation.student.real_name }} | 当前状态：{{ reservation.get_status_display() }}</p>
            </div>
        </div>

        <!-- 当前信息快览 -->
        <div class="current-info">
            <strong>当前信息：</strong>
            {{ reservation.coach.real_name }} 教练 |
            {{ reservation.table.name }} |
            {{ reservation.reservation_date.strftime('%Y-%m-%d') }}
            {{ reservation.start_time.strftime('%H:%M') }}-{{ reservation.end_time.strftime('%H:%M') }} |
            ¥{{ reservation.price }}
        </div>

        <!-- 编辑表单 -->
        <form method="POST" id="editForm">
            {{ form.hidden_tag() }}

            <div class="form-section">
                <h5 class="mb-3">编辑预约信息</h5>

                <!-- 第一行：教练和球台 -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        {{ form.coach_id.label(class="form-label") }}
                        {{ form.coach_id(class="form-select") }}
                        {% if form.coach_id.errors %}
                            <div class="text-danger">
                                {% for error in form.coach_id.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="col-md-6 mb-3">
                        {{ form.table_id.label(class="form-label") }}
                        {{ form.table_id(class="form-select") }}
                        {% if form.table_id.errors %}
                            <div class="text-danger">
                                {% for error in form.table_id.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- 第二行：日期和时间 -->
                <div class="row">
                    <div class="col-md-4 mb-3">
                        {{ form.reservation_date.label(class="form-label") }}
                        {{ form.reservation_date(class="form-control") }}
                        {% if form.reservation_date.errors %}
                            <div class="text-danger">
                                {% for error in form.reservation_date.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="col-md-4 mb-3">
                        {{ form.start_time.label(class="form-label") }}
                        {{ form.start_time(class="form-control") }}
                        {% if form.start_time.errors %}
                            <div class="text-danger">
                                {% for error in form.start_time.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="col-md-4 mb-3">
                        {{ form.end_time.label(class="form-label") }}
                        {{ form.end_time(class="form-control") }}
                        {% if form.end_time.errors %}
                            <div class="text-danger">
                                {% for error in form.end_time.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- 时长显示 -->
                <div class="duration-display" id="durationDisplay" style="display: none;">
                    课程时长：<span id="durationText">0分钟</span>
                </div>

                <!-- 第三行：价格和状态 -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        {{ form.price.label(class="form-label") }}
                        <div class="input-group">
                            <span class="input-group-text">¥</span>
                            {{ form.price(class="form-control") }}
                        </div>
                        {% if form.price.errors %}
                            <div class="text-danger">
                                {% for error in form.price.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="col-md-6 mb-3">
                        {{ form.status.label(class="form-label") }}
                        {{ form.status(class="form-select") }}
                        {% if form.status.errors %}
                            <div class="text-danger">
                                {% for error in form.status.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- 备注 -->
                <div class="mb-3">
                    {{ form.notes.label(class="form-label") }}
                    {{ form.notes(class="form-control", rows="3", placeholder="可选的备注信息") }}
                    {% if form.notes.errors %}
                        <div class="text-danger">
                            {% for error in form.notes.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- 操作按钮 -->
                <div class="d-flex justify-content-between align-items-center">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        管理员编辑权限，请谨慎操作
                    </small>

                    <div>
                        <a href="{{ url_for('admin_reservations.detail', reservation_id=reservation.id) }}"
                           class="btn btn-outline-secondary me-2">
                            取消
                        </a>
                        <button type="submit" class="btn btn-save text-white" id="saveBtn">
                            <i class="fas fa-save me-1"></i>保存修改
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const startTimeField = document.querySelector('input[name="start_time"]');
    const endTimeField = document.querySelector('input[name="end_time"]');
    const durationDisplay = document.getElementById('durationDisplay');
    const durationText = document.getElementById('durationText');

    // 计算并显示时长
    function updateDuration() {
        if (startTimeField.value && endTimeField.value) {
            const start = new Date('1970-01-01T' + startTimeField.value);
            const end = new Date('1970-01-01T' + endTimeField.value);

            if (end > start) {
                const diffMs = end - start;
                const diffMinutes = Math.floor(diffMs / (1000 * 60));
                const hours = Math.floor(diffMinutes / 60);
                const minutes = diffMinutes % 60;

                let durationStr = '';
                if (hours > 0) {
                    durationStr += hours + '小时';
                }
                if (minutes > 0) {
                    durationStr += minutes + '分钟';
                }

                durationText.textContent = durationStr || '0分钟';
                durationDisplay.style.display = 'block';
            } else {
                durationDisplay.style.display = 'none';
            }
        } else {
            durationDisplay.style.display = 'none';
        }
    }

    // 监听时间变化
    startTimeField.addEventListener('change', updateDuration);
    endTimeField.addEventListener('change', updateDuration);

    // 初始计算
    updateDuration();

    // 表单提交验证
    const form = document.getElementById('editForm');
    const saveBtn = document.getElementById('saveBtn');

    form.addEventListener('submit', function(e) {
        if (!startTimeField.value || !endTimeField.value) {
            e.preventDefault();
            alert('请填写完整的时间信息');
            return;
        }

        const start = new Date('1970-01-01T' + startTimeField.value);
        const end = new Date('1970-01-01T' + endTimeField.value);

        if (end <= start) {
            e.preventDefault();
            alert('结束时间必须晚于开始时间');
            return;
        }

        // 显示保存状态
        saveBtn.disabled = true;
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>保存中...';
    });
});
</script>
{% endblock %}